<template>
	<view>
		<view class=" head_wrap" v-for="(item, index) in bankList" :key="index" @click="selectItem(index)">
			<view class="row head">
				<image :src="item.bankIcon" mode="aspectFill" class="bank_logo"></image>
				<view class="bank_wrap">
					<span class="name">{{item.bankName}}</span>
					<span class="bank_num">尾号{{item.bankCardNo}}储蓄卡</span>
				</view>
				<span class="flex_one"></span>
				<image src="../../static/img/select_icon.png" mode="aspectFill" class="select_icon" v-if="item.checked"></image>
			</view>
			
		</view>
	</view>
</template>

<script>
	import { BASE_URL,listBank,setdefault,apply } from '@/utils/api'
	
	export default {
		data() {
			return {
				bankList:[],
				bankCardNo: '',
				withdrawMethodId: 0
			}
		},
		methods: {
			async listBank(){
				let res = await listBank();
				if(res.code == 1){
					this.bankList = res.data;
					this.bankList.map((item, index)=>{
						item.checked = false;
						if(this.withdrawMethodId>0){
							if(item.id == this.withdrawMethodId){
								item.checked = true;
							}
						}else{
							if(index ==0){
								item.checked = true;
							}
						}
						
					})
				}
			},
			selectItem(index){
				this.bankList.map((item, ind)=>{
					item.checked = false;
					if(index == ind){
						item.checked = true;
					}
				});
				// this.$forceUpdate();
				// this.backItem(index);
				
				this.setdefault(this.bankList[index].id);
			},
			async setdefault(id){
				let params = {
					withdrawMethodId: id
				};
				let res = await setdefault(params);
				if(res.code == 1){
					uni.navigateBack();
				}
			},
			backItem(index){
				uni.setStorageSync("bankParams", this.bankList[index]);
				uni.navigateBack();
			},
			async apply(){
				let res = await apply();
				if(res.code == 1){
					this.withdrawMethodId = res.data.withdrawMethodId;
					this.listBank();
				}
			},
		},
		onLoad(opt) {
			this.withdrawMethodId = opt.withdrawMethodId;
			
		},
		onShow() {
			this.apply();
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: '/pages/add_bank/add_bank'
			})
		}
	}
</script>

<style>
	page{height: 100vh; background: #F1F1F1;}
.head_wrap{width: 100%;  padding-left: 26upx; box-sizing: border-box;background: #FFFFFF;}
.head_wrap .head{border-bottom: 2upx solid #F1F1F1; height: 135upx; padding-right: 26upx;}
.head_wrap .bank_logo{width: 60upx; height: 60upx;margin-right: 22upx;}
.head_wrap .select_icon{width: 48upx; height: 48upx;margin-right: 20upx;}
.head_wrap .bank_wrap{display: flex;flex-direction: column;}
.head_wrap .name{color: #333333;font-size: 32upx; font-weight: bold;}
.head_wrap .bank_num{color: #666666;font-size: 26upx; font-weight: normal;}
</style>
